<canvas id="myCanvas" width="1920" height="1080"></canvas>
<p id="scoreDisplay">分数: 0</p>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    var score = 0;

    var circles = [];
    for (var i = 0; i < 100; i++) {
        circles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: 20,
            speed: 2,
        });
    }

    var rectangle = {
        width: 120,
        height: 20,
        x: 0,
        y: 0,
    };

    function drawCircles() {
        circles.forEach(function(circle) {
            ctx.beginPath();
            ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.stroke();
        });
    }

    function drawRectangle() {
        ctx.beginPath();
        ctx.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.stroke();
    }

    function checkCollision() {
        circles.forEach(function(circle, index) {
            var dx = circle.x - Math.max(rectangle.x, Math.min(circle.x, rectangle.x + rectangle.width));
            var dy = circle.y - Math.max(rectangle.y, Math.min(circle.y, rectangle.y + rectangle.height));
            var distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < circle.radius) {
                score += 1;
                document.getElementById('scoreDisplay').innerText = '分数: ' + score;
                resetCircle(index);
            }
            if(circle.y > canvas.height)
            {
                resetCircle(index)
            }
        });
    }

    function resetCircle(index) {
        circles[index].x = Math.random() * canvas.width;
        circles[index].y = 0;
    }

    function update() {
        circles.forEach(function(circle) {
            circle.y += circle.speed;
        });

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        drawCircles();
        drawRectangle();
        checkCollision();

        requestAnimationFrame(update);
    }

    canvas.addEventListener('mousemove', function (evt) {
        var rect = canvas.getBoundingClientRect();
        rectangle.x = evt.clientX - rect.left - rectangle.width / 2;
        rectangle.y = evt.clientY - rect.top - rectangle.height / 2;
    });

    update();
</script>